<script setup>
import { reactive, ref, onMounted } from 'vue'
import { resetForm, objCoppy, myConfrim } from '@/utils'
import { getCollageListApi } from '@/api/major'
import { getMajorListApi } from '@/api/classes'
import {
    getClassListApi, addStudentApi, getListApi, getByIdApi,
    editStudentApi, deleteStudentApi, getRoleListApi, resetPasswordApi
} from '@/api/student'




// 搜索学院列表
const searchCollageList = ref([])
// 搜索专业列表
const searchMajorList = ref([])
// 搜索班级列表
const searchClassList = ref([])
// 搜索表单
const searchModel = reactive({
    collageId: '',
    majorId: '',
    classId: '',
    stuName: '',
    currentPage: 1,
    pageSize: 10,
    total: 0
})
// 新增或者编辑弹窗属性
const addDialog = reactive({
    title: '',
    height: 240,
    width: 600,
    visible: false
})
// 表单属性
const addModel = reactive({
    type: '', // 0 新增 1 编辑
    stuId: '',
    classId: '',
    collageId: '',
    majorId: '',
    roleId: '',
    stuName: '',
    sex: '',
    stuNum: '',
    idCard: '',
    phone: '',
    password: ''
})
// 表单校验规则
const rules = {
    collageId: [{
        trigger: 'blur',
        required: true,
        message: '请选择学院'
    }],
    majorId: [{
        trigger: 'blur',
        required: true,
        message: '请选择专业'
    }],
    classId: [{
        trigger: 'blur',
        required: true,
        message: '请选择班级'
    }],
    stuName: [{
        trigger: 'blur',
        required: true,
        message: '请输入姓名'
    }],
    stuNum: [{
        trigger: 'blur',
        required: true,
        message: '请输入学号'
    }],
    sex: [{
        trigger: 'blur',
        required: true,
        message: '请选择性别'
    }],
    idCard: [{
        trigger: 'blur',
        required: true,
        message: '请输入身份证'
    }],
    phone: [{
        trigger: 'blur',
        required: true,
        message: '请输入手机号'
    }]
}
// 学院数据
const collageList = ref([])
// 专业数据
const majorList = ref([])
// 班级数据
const classList = ref([])
// 角色数据
const roleList = ref([])
// 表格高度
const tableHeight = ref(0)
onMounted(() => {
    tableHeight.value = window.innerHeight - 260
})
// 表格数据
const tableData = ref([])

// 获取学生列表
const getList = async () => {
    const res = await getListApi(searchModel)
    tableData.value = res.data.records
    searchModel.total = res.data.total
}
// 获取角色列表
const getRoleList = async () => {
    const res = await getRoleListApi()
    roleList.value = res.data
}
// 查询学院
const getCollageList = async () => {
    const res = await getCollageListApi()
    collageList.value = res.data
}
// 查询搜索区域学院
const getSearchCollageList = async () => {
    const res = await getCollageListApi()
    searchCollageList.value = res.data
}
// 搜索选择学院改变事件
const searchCollageChange = async (val) => {
    searchModel.majorName = ''
    searchModel.className = ''
    const res = await getMajorListApi({
        collageId: val
    })
    if (res) {
        // 设置专业数据
        searchMajorList.value = res.data
    }
}
// 搜索选择专业改变事件
const searchMajorChange = async (val) => {
    searchModel.className = ''
    const res = await getClassListApi({
        majorId: val
    })
    if (res) {
        // 设置班级数据
        searchClassList.value = res.data
    }
}
// 搜索按钮
const searchBtn = () => getList()

// 重置按钮
const resetBtn = () => {
    searchModel.collageId = ''
    searchModel.classId = ''
    searchModel.majorId = ''
    searchModel.stuName = ''
    searchModel.currentPage = 1
    searchModel.pageSize = 10
    getList()
}
const addForm = ref(null)
// 新增按钮
const addBtn = () => {
    // 查询学院
    collageList.value = []
    getCollageList()
    // 清空上一次的表单
    resetForm(addForm.value, addModel)
    // 显示弹窗
    addDialog.title = '新增学生'
    addDialog.visible = true
    addModel.type = '0'
}
// 重置密码功能
const repassBtn = async (row) => {
    const confirm = await myConfrim('确定要重置该学生的密码吗?')
    if (confirm) {
        let res = await resetPasswordApi(row)
        if (res) {
            ElMessage({
                message: res.msg,
                type: 'success',
            })
        }
    }
}
// 删除按钮
const deleteBtn = async (row) => {
    const confirm = await myConfrim('确定要删除该学生吗?')
    if (confirm) {
        const res = await deleteStudentApi({
            stuId: row.stuId
        })
        if (res) {
            ElMessage({
                message: res.msg,
                type: 'success',
            })
            // 刷新列表
            getList()
        }
    }
}
// 根据学生id获取学生信息
const getById = async (stuId) => {
    const res = await getByIdApi({
        stuId
    })
    if (res) {
        // 把要编辑的数据放入表单
        objCoppy(res.data, addModel)
        // 把type设置为1,表示编辑
        addModel.type = '1'
        // 清空密码
        addModel.password = ''
        // 获取专业列表
        editSelectChange(res.data.collageId)
        // 获取班级列表
        editSelectMajorChange(res.data.majorId)
    }
}
// 编辑按钮
const editBtn = async (row) => {
    // 清空上一次的表单
    resetForm(addForm.value, addModel)
    // 把要编辑的数据放入表单
    getById(row.stuId)
    // 获取学院信息
    collageList.value = []
    const res = await getCollageListApi()
    if (res) {
        collageList.value = res.data
    }
    // 显示弹窗
    addDialog.title = '编辑学生'
    addDialog.visible = true
}
// 弹窗确认
const onConfirm = async () => {
    await addForm.value.validate(async valid => {
        if (valid) {
            let res = null
            if (addModel.type === '0') {
                res = await addStudentApi(addModel)
            } else if (addModel.type === '1') {

                res = await editStudentApi(addModel)
            }
            if (res) {
                ElMessage({
                    message: res.msg,
                    type: 'success',
                })
                getList()
                addDialog.visible = false
            }
        }
    })
}
// 弹窗取消
const onClose = () => addDialog.visible = false
// 页数改变时触发
const currentChange = (page) => {
    searchModel.currentPage = page
    getList()
}
// 页数改变时触发
const sizeChange = (size) => {
    searchModel.pageSize = size
    getList()
}
// 选择学院改变事件
const selectChange = async (val) => {
    // 清空上一次的数据
    addModel.majorId = ''
    majorList.value = []
    addModel.classId = ''
    classList.value = []
    const res = await getMajorListApi({
        collageId: val
    })
    if (res) {
        // 设置专业数据
        majorList.value = res.data
    }
}
// 编辑选择学院改变事件
const editSelectChange = async (val) => {
    // 清空上一次的数据
    majorList.value = []
    const res = await getMajorListApi({
        collageId: val
    })
    if (res) {
        // 设置专业数据
        majorList.value = res.data
    }
}
// 选择专业改变事件
const selectMajorChange = async (val) => {
    // 清空上一次的数据
    addModel.classId = ''
    classList.value = []
    const res = await getClassListApi({
        majorId: val
    })
    if (res) {
        // 设置班级数据
        classList.value = res.data
    }
}
// 编辑选择专业改变事件
const editSelectMajorChange = async (val) => {
    // 清空上一次的数据
    classList.value = []
    const res = await getClassListApi({
        majorId: val
    })
    if (res) {
        // 设置班级数据
        classList.value = res.data
    }
}

getList()
getSearchCollageList()
getRoleList()
</script>

<template>
    <!-- 搜索 -->
    <el-form :model="searchModel" :inline="true">
        <el-form-item>
            <el-select @change="searchCollageChange" style="width: 100%;" v-model="searchModel.collageId"
                placeholder="请选择学院">
                <el-option v-for="item in searchCollageList" :key="item.collageId" :label="item.collageName"
                    :value="item.collageId">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-select @change="searchMajorChange" style="width: 100%;" v-model="searchModel.majorId" placeholder="请选择专业">
                <el-option v-for="item in searchMajorList" :key="item.majorId" :label="item.majorName"
                    :value="item.majorId">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-select style="width: 100%;" v-model="searchModel.classId" placeholder="请选择班级">
                <el-option v-for="item in searchClassList" :key="item.classId" :label="item.className"
                    :value="item.classId">
                </el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-input v-model="searchModel.stuName" placeholder="请输入学生名字"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button icon="Search" @click="searchBtn">搜索</el-button>
            <el-button icon="Close" style="color: #ff7670;" @click="resetBtn">重置</el-button>
            <el-button v-permission="['sys:stuList:add']" type="primary" icon="Plus" @click="addBtn">新增</el-button>
        </el-form-item>
    </el-form>

    <!-- 表格 -->
    <el-table :height="tableHeight" :data="tableData" border stripe>
        <el-table-column prop="stuName" label="姓名"></el-table-column>
        <el-table-column prop="stuNum" label="学号"></el-table-column>
        <el-table-column prop="sex" label="性别">
            <template #default="scope">
                <el-tag v-if="scope.row.sex === '0'">男</el-tag>
                <el-tag v-if="scope.row.sex === '1'" type="danger">女</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号"></el-table-column>
        <el-table-column prop="idCard" label="身份证号"></el-table-column>
        <el-table-column prop="className" label="班级"></el-table-column>
        <el-table-column prop="majorName" label="专业"></el-table-column>
        <el-table-column prop="collageName" label="学院"></el-table-column>

        <el-table-column v-permission="['sys:stuList:edit', 'sys:stuList:delete', 'sys:stuList:reset']" fixed="right"
            label="操作" width="300" align="center">
            <template #default="scope">
                <el-button icon="Edit" type="primary" size="small" @click="editBtn(scope.row)">编辑</el-button>
                <el-button icon="Close" type="success" size="small" @click="repassBtn(scope.row)">重置密码</el-button>
                <el-button icon="Delete" type="danger" size="small" @click="deleteBtn(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page.sync="searchModel.currentPage"
        :page-sizes="[10, 20, 40, 80, 100]" :page-size="searchModel.pageSize" layout="total,sizes,prev,pager,next,jumper"
        :total="searchModel.total" background>
    </el-pagination>

    <!-- 弹窗 -->
    <el-dialog v-model="addDialog.visible" :width="addDialog.width" :close-on-click-modal="false">
        <template #header>
            <h1>{{ addDialog.title }}</h1>
        </template>
        <div :style="{ height: addDialog.height + 'px' }">
            <el-form :model="addModel" ref="addForm" :rules="rules" label-width="80px">

                <el-row>
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="collageId" label="所属学院">
                            <el-select @change="selectChange" style="width: 100%;" v-model="addModel.collageId"
                                placeholder="请选择学院">
                                <el-option v-for="item in collageList" :key="item.collageId" :label="item.collageName"
                                    :value="item.collageId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="majorId" label="所属专业">
                            <el-select @change="selectMajorChange" style="width: 99%;" v-model="addModel.majorId"
                                placeholder="请选择专业">
                                <el-option v-for="item in majorList" :key="item.majorId" :label="item.majorName"
                                    :value="item.majorId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12" :offset="0">
                        <el-form-item prop="classId" label="所属班级">
                            <el-select style="width: 99%;" v-model="addModel.classId" placeholder="请选择班级">
                                <el-option v-for="item in classList" :key="item.classId" :label="item.className"
                                    :value="item.classId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item label="姓名" prop="stuName">
                            <el-input v-model="addModel.stuName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12" :offset="0">
                        <el-form-item label="学号" prop="stuNum">
                            <el-input v-model="addModel.stuNum"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item label="性别" prop="sex">
                            <el-radio-group v-model="addModel.sex">
                                <el-radio :label="'0'">男</el-radio>
                                <el-radio :label="'1'">女</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12" :offset="0">
                        <el-form-item label="身份证" prop="idCard">
                            <el-input v-model="addModel.idCard"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12" :offset="0">
                        <el-form-item label="手机号" prop="phone">
                            <el-input v-model="addModel.phone"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12" :offset="0">
                        <el-form-item label="角色" prop="roleId">
                            <el-select style="width: 99%;" v-model="addModel.roleId" placeholder="请选择角色">
                                <el-option v-for="item in roleList" :key="item.roleId" :label="item.roleName"
                                    :value="item.roleId"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col v-if="addModel.type === '0'" :span="12" :offset="0">
                        <el-form-item label="密码" prop="password">
                            <el-input v-model="addModel.password"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

            </el-form>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="onClose">取消</el-button>
                <el-button type="primary" @click="onConfirm">确定</el-button>
            </span>
        </template>
    </el-dialog>
</template>